
<template>
<div >
    <div class="background">
      <img :src="imgSrc" width="100%" height="100%" alt="" />
    </div>
    <div style="position:absolute;left:200px;top:270px;width:1500px;">
            <div >
                <h1>欢迎注册问卷风</h1>
            </div>
        <div>
            <el-form ref="form" class="form-input"  > 
                
                <el-form-item >
                    <el-input v-model="account.userName" placeholder="账号" clearable></el-input>
                </el-form-item>    
                <el-form-item>
                    <el-input v-model="account.nickName" placeholder="昵称" clearable></el-input> 
                </el-form-item>    
                <el-form-item >
                    <el-input v-model="account.pwd" placeholder="密码" show-password></el-input> 
                </el-form-item>  
            </el-form>
        </div>
        <div >    
            <el-button  @click="goto()">返回登陆</el-button> 
            <el-button  @click="register()">确定注册</el-button>
        </div>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            imgSrc:require('../.././assets/bgb.jpg'),
            account:{  //登录的帐号密码
              pwd: '',
              userName:'',
              nickName:''
            },
        }
    },
    methods: {
        register(){
            if(this.account.userName==''){
                //alert("账号不能为空");
                this.$alert('账号不能为空', '注册提示', {
                confirmButtonText: '知道了，马上去填写',})
            }else if(this.account.pwd==''){
                //alert("密码不能为空");
                this.$alert('密码不能为空', '注册提示', {
                confirmButtonText: '知道了，马上去填写',})
            }
            else if(this.account.nickName==''){
                this.$alert('请填一下昵称', '注册提示', {
                confirmButtonText: '知道了，马上去填写',})
            }
            else{
                this.$axios.post(this.$store.state.url+'/register',this.account)
                .then(res=>{
                    //console.log(res.data);
                 this.$alert(res.data.message, '提示', {
                confirmButtonText: '知道了',})
                    //注册成功就返回登录页面
                    if(res.data.code==20000){
                         this.$router.push('/login');
                    }
                    
                })
            }
           
        },
        goto(){
            this.$router.push('/login');
        }
    }

};
    
</script>
<style scoped>
.form-input{
    width: 20%;
    margin: auto;
}
.background{
    width:100%;  
    height:100%;  /**宽高100%是为了图片铺满屏幕 */
    z-index:-1;
    position: absolute;
}
</style>